<template>
  <div>
    <div class="footer gradient-bg al-m-top-40px">

      <div class="al-flex-container-center-vh">
        <div class="al-flex-container-center-v al-flex-direction-col">
          <div>
            <img src="../../assets/pandalogo.png" alt="熊猫约拍">
          </div>

          <div class="al-title-h1 al-text-color-light-white">熊猫约拍</div>
        </div>

        <div class="al-text-color-light-white">
          <el-menu
                  class="al-bgcolor-transparent"
                  mode="horizontal"
                  active-text-color="#000000">
            <el-menu-item
                    index="1"
                    @click="goPage('/index')">
                            <span class="al-title-h2">
                                主页
                            </span>
            </el-menu-item>
            <el-menu-item
                    index="2"
                    @click="goPage('/appointment/all')">
                            <span class="al-title-h2">
                                约拍
                            </span>
            </el-menu-item>
            <el-menu-item
                    index="3"
                    @click="goPage('/works/all')">
                            <span class="al-title-h2">
                                动态
                            </span>
            </el-menu-item>
            <el-menu-item
                    index="4"
                    @click="goPage('/spot/all')">
                            <span class="al-title-h2">
                                打卡点
                            </span>
            </el-menu-item>
            <el-menu-item
                    index="5"
                    @click="goPage('/search')">
                            <span class="al-title-h2">
                                搜索
                            </span>
            </el-menu-item>
          </el-menu>
        </div>

        <div class="al-box-container">
          <ALImage
                  src="https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/assert/qrcode_for_gh_a80b923fbc86_258.jpg"
                  class="al-width-50"/>
          <div>关注微信公众号</div>
        </div>
      </div>


      <el-divider></el-divider>

      <div class="al-box-container al-text-color-light-white">
        Copyright©2019-2020 版权所有 NullPointerException Team 网站备案号 : 粤ICP备19015903号
      </div>
    </div>


  </div>
</template>

<script>
  import ALImage from "./ALImage";

  export default {
    name: "ALFooter",
    components: {ALImage},
    methods: {
      goPage(path) {
        this.gotoPage(path);
      }
    }
  }
</script>

<style scoped>
  .footer {
    width: 100%;
    height: auto;
    margin-top: 20px;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }

  .gradient-bg {
    width: 100%;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #FFFEFF, #485563, #d1d1d1, #e7f0fd);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }


  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }


  .el-menu--horizontal>.el-menu-item:hover{
    background-color: #00000000;
    color: white;
    transform: scale(1.01);
  }

</style>
